<template>
	<view class="c-wrap" style="margin: 0 25rpx;" v-if="userInfo">
		<view class="top-box" style="margin-top: 30rpx;padding: 40rpx;">
			<view class="u-flex u-flex-y-center">
				<image src="../../static/avatar.png" mode="aspectFill" style="width: 92rpx;height: 92rpx;"></image>
				<text class="ice-ml-20 font-34 bold">{{userInfo.nickname}}</text>
			</view>
			<view class="u-flex u-flex-y-center" style="margin-top: 60rpx;">
				<view class="u-flex-fill" style="border-right: 1rpx solid #AD71C6;padding: 10rpx;">
					<view class="font-26" style="color: rgba(255,255,255,0.71);">{{$t('总业绩')}}</view>
					<view class="font-38 bold ice-mt-20">{{userInfo.total_earn}}</view>
				</view>
				<view class="u-flex-fill" style="padding: 10rpx;">
					<view class="font-26" style="color: rgba(255,255,255,0.71);">{{$t('团队人数')}}</view>
					<view class="font-38 bold ice-mt-20">{{userInfo.team_count}}</view>
				</view>
			</view>
		</view>
		<view class="u-flex u-flex-xy-center ice-mt-30">
			<u-button @click="changeType(0)" style="width: 257rpx;"  shape="circle"  :text="$t('直推')+`(${userInfo.one_count})`" :color="param.type==0?'linear-gradient(106deg, #258CE9, #DA2B45)':'transparent'"></u-button>
			<u-button @click="changeType(1)" style="width: 257rpx;"  shape="circle" :text="$t('间推')+`(${userInfo.two_count})`" :color="param.type==1?'linear-gradient(106deg, #258CE9, #DA2B45)':'transparent'"></u-button>
		</view>
		<view class="team-box ice-mt-30">
			<view class="team-item u-flex" v-for="(item,idx) in list" :key="idx">
				<view class="u-flex u-flex-xy-center" style="background-color: rgba(255,255,255,0.81);width: 80rpx;height: 80rpx;border-radius: 80rpx;">
					<u--image src="../../static/avatar.png" shape="circle" width="68.3rpx" height="68.3rpx" mode="scaleToFill"></u--image>
				</view>
				<view class="ice-ml-20 u-flex-fill">
					<view class="font-30 bold ice-mt-20">
						<text>{{item.nickname}}</text>
						<text class="ice-ml-20">{{$t('团队')}}</text>
						<text class="red ice-ml-4 ice-mr-4">{{item.team_count}}</text>
						<text>{{$t('人')}}</text>
					</view>
					<view class="u-flex u-flex-y-center u-flex-between ice-mt-30 ice-mr-30">
						<view class="" style="text-align: center;">
							<view class="font-26" style="color: rgba(255,255,255,0.47);">{{$t('直推收益')}}</view>
							<view class="font-32 bold ice-mt-20 red">{{item.earn_1}}</view>
						</view>
						<view class=""  style="text-align: center;">
							<view class="font-26" style="color: rgba(255,255,255,0.47);">{{$t('团队收益')}}</view>
							<view class="font-32 bold ice-mt-20 red">{{item.earn_2}}</view>
						</view>
					</view>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[],
				info:null,
				userInfo:null,
				param: {
					page: 1,
					size:20,
					type:0,
				},
				over: false,
			}
		},
		async onLoad(e) {
			uni.setNavigationBarTitle({
				title:this.$t("我的团队")
			})
			await uni.$ice.checkLogin()
			this.getUserInfo()
			this.getList()
		},
		onReachBottom() {
			// console.log('onReachBottom')
			this.getList()
		},
		onPullDownRefresh() {
			this.list = [];
			this.over = false;
			this.param.page = 1;
			this.getList()
		},
		onShow() {
			
		},
		methods: {
			changeType(type){
				this.param.type = type;
				this.list = [];
				this.over = false;
				this.param.page = 1;
				this.getList()
			},
			getUserInfo() {
				uni.$ice.post('user/team', {}, false).then(res => {
					this.userInfo = res.data
					uni.stopPullDownRefresh()
			
				}).catch(err => {
			
				})
			},
			getList() {
				if (this.over) {
					return;
				}
				uni.$ice.post('user/invite_list', this.param, false).then(res => {
					if (this.param.page == 1) {
						this.list = res.data
					} else {
						this.list = this.list.concat(res.data);
					}
					if (res.data.length < this.param.size) {
						this.over = true;
					} else {
						this.param.page++;
					}
					uni.stopPullDownRefresh()
			
				}).catch(err => {
			
				})
			},
		}
	}
</script>

<style scoped>
	.top-box{
		background: linear-gradient(119deg, #258CE9, #DA2B45);
		border-radius: 12rpx;
		margin: auto;
		text-align: center;
		padding: 54rpx 0 60rpx 0;
	}
	.red{
		color: #E90F33;
	}
	.team-box{
		background: #0E0E0E;
		border-radius: 12rpx;
		border: 1px solid #252525;
		padding: 0 25rpx;
	}
	.team-item{
		padding: 25rpx;
		border-bottom: 1rpx solid #171717;
	}
</style>